<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛博侦探游戏 - Agent架构演示</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #0d1117;
            color: #c9d1d9;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            color: #58a6ff;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #8b949e;
            font-size: 18px;
        }
        
        .demo-section {
            background-color: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .demo-section h2 {
            color: #f0f6fc;
            margin-top: 0;
            border-bottom: 1px solid #30363d;
            padding-bottom: 10px;
        }
        
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .old-api, .new-agent {
            padding: 20px;
            border-radius: 8px;
        }
        
        .old-api {
            background-color: #2d1b1b;
            border: 1px solid #f85149;
        }
        
        .new-agent {
            background-color: #1b2d1b;
            border: 1px solid #3fb950;
        }
        
        .old-api h3 {
            color: #f85149;
        }
        
        .new-agent h3 {
            color: #3fb950;
        }
        
        .code-block {
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            margin: 10px 0;
            overflow-x: auto;
        }
        
        .code-block code {
            color: #e6edf3;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        .highlight {
            background-color: #ffd33d22;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .benefits {
            list-style: none;
            padding: 0;
        }
        
        .benefits li {
            padding: 8px 0;
            border-bottom: 1px solid #30363d;
        }
        
        .benefits li:before {
            content: "✅ ";
            color: #3fb950;
            font-weight: bold;
        }
        
        .demo-button {
            background-color: #238636;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
        }
        
        .demo-button:hover {
            background-color: #2ea043;
        }
        
        .demo-button:disabled {
            background-color: #484f58;
            cursor: not-allowed;
        }
        
        .output {
            background-color: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            margin-top: 10px;
            min-height: 100px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
        }
        
        .loading {
            color: #ffd33d;
        }
        
        .success {
            color: #3fb950;
        }
        
        .error {
            color: #f85149;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎮 赛博侦探游戏</h1>
        <p>Agent架构演示 - 从REST API到智能Agent的演进</p>
    </div>

    <div class="demo-section">
        <h2>🔄 架构对比</h2>
        <div class="comparison-grid">
            <div class="old-api">
                <h3>🔴 旧架构 (REST API)</h3>
                <div class="code-block">
                    <code>
// 多个固定的API端点
POST /api/game/start
POST /api/game/chat  
POST /api/game/submit
GET  /api/game/status/:id

// 手动处理每个请求
app.post('/api/game/start', async (req, res) => {
  // 验证参数
  // 调用Agent
  // 处理错误
  // 返回响应
});
                    </code>
                </div>
                <p>❌ 需要维护多个端点<br>
                ❌ 重复的错误处理代码<br>
                ❌ 固定的接口结构<br>
                ❌ 难以扩展新功能</p>
            </div>
            
            <div class="new-agent">
                <h3>🟢 新架构 (Agent + Client)</h3>
                <div class="code-block">
                    <code>
// 统一的Agent接口
const result = await client.agent.run({
  agentId: 'gameManagerAgent',
  messages: [{
    role: 'user',
    content: '请开始一个困难难度的推理游戏'
  }]
});

// 智能的自然语言交互
await gameClient.startNewGame('hard', '酒店', 5);
await gameClient.chatWithSuspect(gameId, 'suspect-1', '你当时在哪里？');
                    </code>
                </div>
                <ul class="benefits">
                    <li>统一的Agent接口</li>
                    <li>自然语言交互</li>
                    <li>智能参数解析</li>
                    <li>灵活的功能扩展</li>
                    <li>自动错误处理</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="demo-section">
        <h2>🚀 实时演示</h2>
        <p>点击下面的按钮体验新的Agent架构：</p>
        
        <button class="demo-button" onclick="testStartGame()">开始新游戏</button>
        <button class="demo-button" onclick="testChat()" id="chatBtn" disabled>与嫌疑人对话</button>
        <button class="demo-button" onclick="testSubmit()" id="submitBtn" disabled>提交推理</button>
        <button class="demo-button" onclick="testStatus()" id="statusBtn" disabled>获取状态</button>
        
        <div class="output" id="output">等待操作...</div>
    </div>

    <div class="demo-section">
        <h2>📊 架构优势</h2>
        <ul class="benefits">
            <li><span class="highlight">更简洁的代码</span>：从多个API端点简化为单一Agent接口</li>
            <li><span class="highlight">智能交互</span>：支持自然语言指令，无需严格的参数格式</li>
            <li><span class="highlight">自动处理</span>：Agent自动处理参数验证、错误恢复和降级方案</li>
            <li><span class="highlight">易于扩展</span>：新功能只需更新Agent指令，无需修改API路由</li>
            <li><span class="highlight">更好的用户体验</span>：统一的调用方式和错误处理</li>
            <li><span class="highlight">维护成本低</span>：减少了大量的样板代码和重复逻辑</li>
        </ul>
    </div>

    <script>
        let currentGameId = null;
        
        function log(message, type = 'info') {
            const output = document.getElementById('output');
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : type === 'success' ? 'success' : type === 'loading' ? 'loading' : '';
            output.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
            output.scrollTop = output.scrollHeight;
        }
        
        function clearOutput() {
            document.getElementById('output').innerHTML = '';
        }
        
        async function testStartGame() {
            clearOutput();
            log('🎮 开始新游戏...', 'loading');
            
            try {
                // 模拟Agent调用
                log('📡 调用游戏管理Agent...', 'loading');
                log('Agent ID: gameManagerAgent', 'info');
                log('操作: start_game', 'info');
                log('参数: { difficulty: "easy", theme: "办公室", suspectCount: 3 }', 'info');
                
                // 模拟延迟
                await new Promise(resolve => setTimeout(resolve, 2000));
                
                // 模拟成功响应
                currentGameId = `game-${Date.now()}`;
                log('✅ 游戏创建成功！', 'success');
                log(`游戏ID: ${currentGameId}`, 'success');
                log('案件标题: 办公室咖啡毒杀案', 'success');
                log('嫌疑人数量: 3', 'success');
                log('初始线索: 1条', 'success');
                
                // 启用其他按钮
                document.getElementById('chatBtn').disabled = false;
                document.getElementById('submitBtn').disabled = false;
                document.getElementById('statusBtn').disabled = false;
                
            } catch (error) {
                log(`❌ 游戏创建失败: ${error.message}`, 'error');
            }
        }
        
        async function testChat() {
            log('\n💬 与嫌疑人对话...', 'loading');
            log('嫌疑人: suspect-1 (李助理)', 'info');
            log('问题: "你当时在哪里？"', 'info');
            
            await new Promise(resolve => setTimeout(resolve, 1500));
            
            log('✅ 对话成功！', 'success');
            log('回应: "我当时在会议室整理文件，有监控可以证明。"', 'success');
            log('情绪状态: nervous', 'success');
            log('可疑程度: 3/10', 'success');
        }
        
        async function testSubmit() {
            log('\n🔍 提交推理结果...', 'loading');
            log('选择的真凶: suspect-2 (王同事)', 'info');
            log('推理过程: 根据动机和线索分析...', 'info');
            
            await new Promise(resolve => setTimeout(resolve, 1500));
            
            log('✅ 推理评估完成！', 'success');
            log('结果: 正确！', 'success');
            log('得分: 85/100', 'success');
            log('解释: 王同事确实是真凶，推理逻辑正确。', 'success');
        }
        
        async function testStatus() {
            log('\n📊 获取游戏状态...', 'loading');
            
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            log('✅ 状态获取成功！', 'success');
            log(`游戏ID: ${currentGameId}`, 'success');
            log('阶段: investigation', 'success');
            log('剩余时间: 120秒', 'success');
            log('对话次数: 1', 'success');
            log('发现线索: 1条', 'success');
        }
        
        // 页面加载时的欢迎信息
        window.onload = function() {
            log('🚀 Agent架构演示系统已就绪', 'success');
            log('点击"开始新游戏"按钮开始体验！', 'info');
        };
    </script>
</body>
</html>
